<template>
  <div class="box">
    <!-- 头部 -->
    <div class="top">
      <div class="top-left">
        <img src="	https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="" />
        <div class="title">
          <div class="top1">严选{{ nickName }}</div>
          <div class="bottom1">普通用户</div>
        </div>
      </div>
      <div class="top-right">
        <a class="icon">
          <van-icon name="apps-o" />
        </a>
        <div class="vip">
          <van-icon name="smile" class="icon2" />
          <div class="word">
            <div class="line1">Pro会员</div>
            <div class="line2">立即开通</div>
            <van-icon name="arrow" class="jiantou" />
          </div>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="middle">
      <h2 class="money">我的资产</h2>
      <div class="assetList">
        <div class="assetItem">
          <p class="one">
            <span class="unit">￥</span>
            <span class="value">0</span>
            <span class="redDot"></span>
          </p>
          <p class="two">余额</p>
        </div>
        <div class="assetItem">
          <p class="one">
            <span class="value">0</span>
          </p>
          <p class="two">红包</p>
        </div>
        <div class="assetItem">
          <p class="one">
            <span class="value">0</span>
          </p>
          <p class="two">优惠券</p>
        </div>
        <div class="assetItem">
          <p class="one">
            <span class="value">0</span>
          </p>
          <p class="two">积分</p>
        </div>
        <div class="assetItem">
          <p class="one">
            <span class="value">0</span>
          </p>
          <p class="two">礼品卡</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bot-bottom-list">
        <router-link to="/myorder">
          <div class="bottom-item">
            <i class="iconfont icon-dingdan" style="font-size: 25px"></i>
            <span class="order">我的订单</span>
          </div>
        </router-link>
        <div class="bottom-item">
          <i class="iconfont icon-geren"></i>
          <span class="order">账号管理</span>
        </div>
        <div class="bottom-item" style="border-right: none">
          <i class="iconfont icon-shouji"></i>
          <span class="order">我的手机号</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-rili"></i>
          <span class="order">周六一起拼</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-shouhou"></i>
          <span class="order">售后服务</span>
        </div>
        <div class="bottom-item" style="border-right: none">
          <i class="iconfont icon-yaoqinghan"></i>
          <span class="order">邀请返利</span>
        </div>

        <div class="bottom-item">
          <i class="iconfont icon-gouwudai"></i>
          <span class="order">优先购</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-qian"></i>
          <span class="order">积分中心</span>
        </div>
        <div class="bottom-item" style="border-right: none">
          <i class="iconfont icon-huiyuan"></i>
          <span class="order">会员俱乐部</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-dizhi"></i>
          <span class="order">地址管理</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-zhifu center"></i>
          <span class="order">支付安全</span>
        </div>
        <div class="bottom-item" style="border-right: none">
          <i class="iconfont icon-kefu"></i>
          <span class="order">帮助与客服</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-yijianfankui"></i>
          <span class="order">意见反馈</span>
        </div>
        <div class="bottom-item">
          <i class="iconfont icon-sifapaimai"></i>
          <span class="order">我的竞拍</span>
        </div>
        <div class="bottom-item" style="border-right: none"></div>
      </div>
    </div>
    <!-- 退出 -->
    <div class="logout" @touchend="logout">退出登录</div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import { mapState } from "vuex";
Vue.use(Dialog);

export default {
  mounted() {
    // this.$store.state.user.nickName
    this.getUserInfo();
  },
  methods: {
    logout() {
      this.$store.dispatch("user/logout");
      console.log(this);
      Dialog.confirm({
        message: "确认退出？",
      })
        .then(() => {
          // on confirm
          this.$router.push({ path: "/codelogin" });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 获取用户信息
    async getUserInfo() {
   
      await this.$store.dispatch("user/getUserInfo");
    
    },
  },
  computed: {
    ...mapState({
      nickName: (state) => state.user.nickName,
    }),
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 375px;
  height: 870px;
  background-color: #dee1e6;
  /*头部*/
  .top {
    width: 100%;
    padding-left: 15px;
    display: flex;
    box-sizing: border-box;
    background-image: url(https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
    background-size: 100%;
    background-position: bottom;
    overflow: hidden;
    .top-left {
      display: flex;
      width: 240.5px;
      padding: 32px 0px;
      align-items: center;
      img {
        width: 71px;
        height: 71px;
        border-radius: 50%;
      }
      .title {
        flex: 1;
        padding-left: 15px;
        .top1 {
          width: 100%;
          height: 21.6px;
          color: #fff;
          font-size: 18px;
          margin-bottom: 5px;
          text-align: left;
        }
        .bottom1 {
          width: 100%;
          height: 15.4px;
          color: #fff;
          font-size: 14px;
          text-align: left;
        }
      }
    }
    .top-right {
      padding-left: 8.5px;
      width: 111px;
      height: 94px;
      margin-top: 20px;
      position: relative;
      .icon {
        position: absolute;
        top: 10px;
        left: 80px;
        width: 32px;
        height: 32px;
      }
      .vip {
        position: absolute;
        left: 8.5px;
        top: 52px;
        padding: 0 10px 0 10px;
        width: 100%;
        height: 42px;
        background-color: #333;
        border-radius: 20px 0 0 20px;
        .icon2 {
          position: absolute;
          top: 7px;
          left: 10px;
          font-size: 28px;
          color: #f2c87b;
        }
        .word {
          position: absolute;
          left: 38px;
          top: 0;
          padding: 5px 0px;
          width: 59px;
          height: 42px;
          .line1 {
            font-size: 12px;
            color: #f3c97d;
          }
          .line2 {
            font-size: 12px;
            color: #f3c97d;
          }
          .jiantou {
            font-size: 9px;
            position: absolute;
            left: 58px;
            top: 23px;
            color: #f2c87b;
          }
        }
      }
    }
  }
  /*中间*/
  .middle {
    width: 100%;
    height: 142.6px;
    background-color: white;
    margin-bottom: 15px;
    .money {
      box-sizing: border-box;
      width: 100%;
      height: 52.6px;
      margin-left: 15px;
      text-align: left;
      line-height: 52.6px;
      border-bottom: 1px solid #d9d9d9;
    }
    .assetList {
      display: flex;
      padding-top: 16px;
      .assetItem {
        flex: 1 1 auto;
        .one {
          height: 24px;
          line-height: 24px;
          font-weight: 700;
          position: relative;
          .unit {
            font-size: 12px;
          }
          .value {
            font-size: 16px;
          }
          .redDot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            top: 3px;
            left: 43px;
          }
        }
        .two {
          margin-top: 2px;
          font-size: 12px;
          height: 18px;
          line-height: 18px;
        }
      }
    }
  }
  /*底部*/
  .bottom {
    .bot-bottom-list {
      display: flex;
      flex-wrap: wrap;
      .bottom-item {
        width: 125px;
        height: 90px;
        background-color: #fff;
        border: 1px solid #bbb;
        border-top: none;
        border-left: none;
        padding-top: 22.5px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        .iconfont {
          font-size: 25px;
        }
        .order {
          font-size: 12px;
          padding-top: 4px;
        }
      }
    }
  }
  /*退出*/
  .logout {
    width: 100%;
    height: 48px;
    background-color: #fff;
    margin: 20px 0 10px;
    font-size: 14px;
    line-height: 48px;
  }
}
</style>
